import React from 'react';
import {
    AppOutline,
    UserOutline
  } from 'antd-mobile-icons'

const Menu = () => {
    
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/business/index',
            title: '我的',
            icon: <UserOutline />,
        }
    ]
    const navigate = React.Router.useNavigate()
    // Location 对象包含有关当前 URL 的信息。
    const location = React.Router.useLocation()
    const { pathname } = location
    const setRouteActive = (value: string) => {
        navigate(value)
      }

    return (
        <>
            <React.UI.TabBar className="Menu" style={{position:'fixed',width:'100%'}} safeArea activeKey={pathname} onChange={(value:any) => setRouteActive(value)}>
                {tabs.map(item => (
                    <React.UI.TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </React.UI.TabBar>
        </>
    )
}

export default Menu